<template>
  <van-field
    :label="field.label"
    :rules="field.rules"
    :name="field.prop"
    :value="modelValue"
    :model-value="modelValue"
  >
    <template #input>
      <component
        :is="
          field.render({
            modelValue: modelValue,
            'onUpdate:modelValue': (val) => emit('update:modelValue', val),
          })
        "
      />
    </template>
  </van-field>
</template>

<script setup>
defineProps({
  field: {
    type: Object,
    required: true,
  },
  modelValue: {
    type: [String, Number, Boolean, Array, Object],
    default: "",
  },
});

const emit = defineEmits(["update:modelValue"]);
</script>
